<template>
    <Modal
            width="1200"
            v-model="visible"
            :title="title"
            :key="key"
    >
        <Spin size="large" fix v-if="Loading"></Spin>
        <Form ref="model" :model="model" :rules="rules" inline :label-width="180" :disabled=disableSubmit>
            <table style="width:100%;">
                <tr>
                    <td style="width:33%;" colspan="2">
                        <FormItem label="姓名" prop="azcp0003">
                            <Input v-model="model.azcp0003" placeholder="" class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td style="width:33%;" colspan="2">
                        <FormItem label="与申请人关系" prop="azcp0517">
                            <c-dict-select v-model="model.azcp0517" dictCode="familyrelationship" :width="180"
                                           :disabled="disableAzcp0517" :hiddenKeys="hiddenKeys"/>
                        </FormItem>
                    </td>
                    <td rowspan="4" style="width:34%;text-align: center" colspan="2">
                        <Upload action="" :accept="acceptImg" :before-upload="(file) => beforeUpload(file,'azcp0519')">
                            <img :src="model.azcp0519" alt="..." style="height: 160px; width:120px;">
                        </Upload>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="证件类型" prop="azcp0002">
                            <c-dict-select v-model="model.azcp0002" dictCode="certificatetypels" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="证件号码" prop="azcp0001">
                            <Input v-model="model.azcp0001" placeholder="" class="itemStyle"
                                   @on-blur="checkIdcard()"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="国籍" prop="azcp0006">
                            <c-dict-select v-model="model.azcp0006" dictCode="nationality" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="户籍类别" prop="azcp0013">
                            <c-dict-select v-model="model.azcp0013" dictCode="registertype" :width="180"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="民族" prop="azcp0007">
                            <c-dict-select v-model="model.azcp0007" dictCode="nation" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="文化程度" prop="azcp0008">
                            <c-dict-select v-model="model.azcp0008" dictCode="education" :width="180"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="政治面貌" prop="azcp0012">
                            <c-dict-select v-model="model.azcp0012" dictCode="politicaloutlook" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="婚姻状况" prop="azcp0010">
                            <c-dict-select v-model="model.azcp0010" dictCode="maritalstatus" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="特定救助对象类型" prop="azcp0547">
                            <c-dict-select v-model="model.azcp0547" dictCode="specificrelief" :width="180"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="学业状况" prop="azcp0539">
                            <c-dict-select v-model="model.azcp0539" dictCode="educationstatus" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="就业状况" prop="azcp0540">
                            <c-dict-select v-model="model.azcp0540" dictCode="workstatus" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="优抚对象类别" prop="azcp0520">
                            <c-dict-select v-model="model.azcp0520" dictCode="specialcare" :width="180"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="健康状况" prop="azcp0009">
                            <c-dict-select v-model="model.azcp0009" dictCode="health" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="劳动能力丧失情况" prop="azcp0502">
                            <c-dict-select v-model="model.azcp0502" dictCode="workability" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="重病病种" prop="azcp0524">
                            <c-dict-select v-model="model.azcp0524" dictCode="sicknesstype" :width="180"
                                           :disabled="disableAzcp0524"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="是否残疾" prop="azcp0503">
                            <c-dict-select v-model="model.azcp0503" dictCode="yesorno" :width="180"
                            />
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="残疾类别" prop="azcp0504">
                            <c-dict-select v-model="model.azcp0504" dictCode="disabilitytype" :width="180"
                                           :disabled="disableAzcp0504"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="残疾等级" prop="azcp0505">
                            <c-dict-select v-model="model.azcp0505" dictCode="disabilityclass" :width="180"
                                           :disabled="disableAzcp0505"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="当前是否已参加医疗保险" prop="azcp0527">
                            <c-dict-select v-model="model.azcp0527" dictCode="insuranceornot" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="医疗保险参保类型" prop="azcp0528">
                            <c-dict-select v-model="model.azcp0528" dictCode="insuredtype" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="联系电话" prop="azcp0514">
                            <Input v-model="model.azcp0514" placeholder="" class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="是否三无人员" prop="azcp0512">
                            <c-dict-select v-model="model.azcp0512" dictCode="yesorno" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="是否纳入扶贫建档立卡对象" prop="azcp0545">
                            <c-dict-select v-model="model.azcp0545" dictCode="yesorno" :width="180"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <FormItem label="身份证信息上传" prop="azcp0551">
                            <Upload action="" :accept="acceptImg"
                                    :before-upload="(file) => beforeUpload(file,'azcp0551')">
                                <Row class="imgBackColor">
                                    <i-col span="20" class="idCard">
                                        <img :src="model.azcp0551">
                                    </i-col>
                                    <i-col span="4" class="positiveTDiv">正面上传</i-col>
                                </Row>
                            </Upload>
                        </FormItem>
                        <FormItem prop="azcp0552" :label-width="0">
                            <Upload action="" :accept="acceptImg"
                                    :before-upload="(file) => beforeUpload(file,'azcp0552')">
                                <Row class="imgBackColor">
                                    <i-col span="20" class="idCard">
                                        <img :src="model.azcp0552">
                                    </i-col>
                                    <i-col span="4" class="positiveTDiv">反面上传</i-col>
                                </Row>
                            </Upload>
                        </FormItem>
                    </td>
                </tr>
            </table>
        </Form>
        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <template v-if="!disableSubmit">
                <Button type="primary" @click="ok">确定</Button>
            </template>
        </div>
    </Modal>
</template>

<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import ICol from "view-design/src/components/grid/col";
    import pic_sfz_z from '@/assets/images/sfz_z.jpg'
    import pic_sfz_f from '@/assets/images/sfz_f.jpg'
    import head_photo from '@/assets/images/header.jpeg'
    import {getAction, postAction} from '@/api/request'
    import {IdentityCodeValid, getAgeByIdcardByHD} from '@/plugins/idcardValid.js'

    const azcp0552Img = pic_sfz_f;
    const azcp0551Img = pic_sfz_z;
    const imgSrc = head_photo;

    export default {
        components: {ICol},
        name: "ss11302-modal",
        mixins: [CommonMixin],
        data() {
            return {
                hiddenKeys: "",
                visible: false,
                disableSubmit: false,
                disableAzcp0524: true,
                disableAzcp0504: true,
                disableAzcp0505: true,
                disableAzcp0517: false,
                title: "",
                model: {},
                key: "",
                Loading: false,
                uploadFileData: {},
                fieldsToValidate: ['azcp0003', 'azcp0517', 'azcp0002', 'azcp0001', 'azcp0013', 'azcp0007',
                    'azcp0009', 'azcp0502', 'azcp0512', 'azcp0527', 'azcp0545', 'azcp0503',],
                url: {
                    update: '/api/ac/subsistence/ss11302Service/update',
                    insert: '/api/ac/subsistence/ss11302Service/insert',
                },
                rules: {
                    azcp0003: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    azcp0517: [
                        {required: true, message: '请选择与申请人关系', trigger: 'blur'}
                    ],
                    azcp0002: [
                        {required: true, message: '请选择证件类型', trigger: 'blur'}
                    ],
                    azcp0001: [
                        {required: true, message: '请填写证件号码', trigger: 'blur'}
                    ],
                    azcp0013: [
                        {required: true, message: '请选择户籍类别', trigger: 'blur'}
                    ],
                    azcp0007: [
                        {required: true, message: '请选择民族', trigger: 'blur'}
                    ],
                    azcp0009: [
                        {required: true, message: '请选择健康状况', trigger: 'blur'}
                    ],
                    azcp0502: [
                        {required: true, message: '请选择劳动能力丧失情况', trigger: 'blur'}
                    ],
                    azcp0512: [
                        {required: true, message: '请选择是否三无人员', trigger: 'blur'}
                    ],
                    azcp0527: [
                        {required: true, message: '请选择当前是否已参加医疗保险', trigger: 'blur'}
                    ],
                    azcp0545: [
                        {required: true, message: '请选择是否纳入建档立卡对象', trigger: 'blur'}
                    ],
                    azcp0503: [
                        {required: true, message: '请选择是否残疾', trigger: 'blur'}
                    ],
                    azcp0524: [
                        {required: false, message: '请选择重病病种', trigger: 'blur'}
                    ],
                    azcp0505: [
                        {required: false, message: '请选择残疾等级', trigger: 'blur'}
                    ],
                    azcp0504: [
                        {required: false, message: '请选择残疾类别', trigger: 'blur'}
                    ],
                    azcp0528: [
                        {required: false, message: '请选择医疗保险类型', trigger: 'blur'}
                    ],
                }
            }
        },
        watch: {
            'model.azcp0009': function () {
                this.setRules0009();
            },
            'model.azcp0503': function () {
                this.setRules0503();
            },
            'model.azcp0527': function () {
                this.setRules0527();
            },
        },
        methods: {
            loadImg(response, file, name, id) {
                if (response.errcode == 0) {
                    this.$set(this.model, name, response.data);
                } else {
                    this.$Message.error('上传失败！')
                }
                this.Loading = false;
            },
            add() {
                var row = new Object();
                row.azcp0500 = this.$parent.queryParam.azcp0500;
                this.edit(row);
                this.hiddenKeys = "01";
            },
            edit(row) {
                this.model = Object.assign({}, row);
                if (!this.model.azcp0519) {
                    this.model.azcp0519 = imgSrc;
                }
                if (!this.model.azcp0552) {
                    this.model.azcp0552 = azcp0552Img;
                }
                if (!this.model.azcp0551) {
                    this.model.azcp0551 = azcp0551Img;
                }
                if (this.model.azcp0517 == '01') {
                    this.disableAzcp0517 = true;
                } else {
                    this.hiddenKeys = "01";
                    this.disableAzcp0517 = false;
                }
                this.setRules0009();
                this.setRules0527();
                this.setRules0503();
                this.visible = true;

            },

            ok() {
                let that = this;
                let validate = true;
                let err_msg = [];
                that.Loading = true;
                for (let item of that.fieldsToValidate) {
                    that.$refs['model'].validateField(item, (error) => {
                        if (error) {
                            validate = false;
                            err_msg.push(error)
                        }
                    })
                }
                if (validate) {
                    // if (this.model.azcp0552 == azcp0552Img || this.model.azcp0551 == azcp0551Img) {
                    //     that.$Message.error("请上传身份证照片！");
                    //     that.Loading = false;
                    // } else {
                        var url = this.url.insert;
                        if (this.model.id) {
                            url = this.url.update;
                        }
                        postAction(url, this.model).then((res) => {
                            if (res.data.errcode == 0) {
                                that.$Message.success(res.data.data);
                                that.$emit('ok');
                                that.visible = false;
                            } else {
                                that.$Message.error(res.data.errmsg)
                            }
                        }).finally(() => {
                            that.Loading = false;
                        })
                    //}
                } else {
                    that.$Message.error(err_msg[0]);
                    that.Loading = false;
                    return
                }
            },
            //设置选择必填
            setRules0503() {
                var azcp0503 = this.model.azcp0503;
                if (azcp0503 == '1') {
                    //残疾
                    this.fieldsToValidateAdd(['azcp0505', 'azcp0504']);
                    this.changeRule(['azcp0505', 'azcp0504'], true);
                    this.disableAzcp0504 = false;
                    this.disableAzcp0505 = false;
                } else {
                    this.fieldsToValidateRemove(['azcp0505', 'azcp0504']);
                    this.changeRule(['azcp0505', 'azcp0504'], false);
                    this.clearModel(['azcp0504', 'azcp0505']);
                    this.disableAzcp0504 = true;
                    this.disableAzcp0505 = true;
                }
            },
            setRules0009() {
                var azcp0009 = this.model.azcp0009;
                if (azcp0009 == "40") {
                    this.fieldsToValidateAdd(['azcp0524']);
                    this.changeRule(['azcp0524'], true);
                    this.disableAzcp0524 = false;
                } else {
                    this.fieldsToValidateRemove(['azcp0524']);
                    this.changeRule(['azcp0524'], false);
                    this.clearModel(['azcp0524']);
                    this.disableAzcp0524 = true;
                }
            },

            setRules0527() {
                var azcp0527 = this.model.azcp0527;
                if (azcp0527 == '1') {
                    // 参加医疗保险
                    this.fieldsToValidateAdd(['azcp0528']);
                    this.changeRule(['azcp0528'], true);
                } else {
                    this.fieldsToValidateRemove(['azcp0528']);
                    this.changeRule(['azcp0528'], false);
                    this.clearModel(['azcp0528']);
                }
            },


            clearModel(names) {
                for (var i in names) {
                    this.$set(this.model, names[i], "");
                }
            },
            fieldsToValidateAdd(names) {
                for (var i in names) {
                    this.fieldsToValidate.push(names[i]);
                }
            },
            fieldsToValidateRemove(names) {
                for (var i in names) {
                    var index = this.fieldsToValidate.indexOf(names[i]);
                    if (index >= 0) {
                        this.fieldsToValidate.splice(this.fieldsToValidate.indexOf(names[i]), 1);
                    }
                }
            },
            changeRule(names, required) {
                for (var i in names) {
                    this.rules[names[i]][0].required = required;
                }
            },
            cancel() {
                this.visible = false;
            },
            checkIdcard() {  //验证身份证是否合法并判断证件上传类型
                let that = this;
                let azcp0001 = that.model.azcp0001;
                if (azcp0001 != '' && typeof (azcp0001) != 'undefined') {
                    azcp0001 = azcp0001.toUpperCase()
                    if (!IdentityCodeValid(azcp0001)) {
                        that.$Message.error('申请人身份证号码格式不合法')
                        that.model.azcp0001 = null
                    }
                }
            },
        }
    }
</script>

<style scoped>
    /deep/ .ivu-form-item-error-tip {
        display: none;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 0px;
    }

    .itemStyle {
        width: 180px
    }

    .idCard {
        height: 100%;
        padding: 20px;
        background-color: WhiteSmoke;
    }

    /deep/ .ivu-upload-list {
        display: none;
    }

    .imgBackColor {
        height: 250px;
        width: 470px;
        cursor: pointer;
    }

    .imgBackColor img {
        width: 100%;
        height: 100%;
    }

    .positiveTDiv {
        height: 250px;
        background-color: #7CCD7C;
        color: white;
        font-size: 20px;
        font-weight: 700;
        word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
        writing-mode: vertical-rl; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
        writing-mode: tb-rl; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
        text-align: center;
        padding: 0px;
        display: flex;
        -webkit-display: flex;
        flex-direction: column;
        justify-content: center;
        letter-spacing: 20px;

    }
</style>